<template>
  <div class="loginForm">
    <el-form
      ref="employee"
      :model="employee"
      label-width="80px"
      style="width: 300px"
    >
      <el-form-item label="工号" prop="number">
        <el-input v-model="employee.number" placeholder="请输入工号"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="employee.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码">
        <el-input
          v-model="employee.verifyCode"
          placeholder="请输入验证码"
        ></el-input>
        <img :src="verifycodesrc" @click="createverifycode" />
      </el-form-item>

      <el-form-item>
        <el-button
          @click="login"
          style="width: 180px; color: rgb(109, 164, 232)"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      employee: {},
      verifycodesrc: "",
      uuid: "",
    };
  },
  mounted() {
    this.createverifycode();
  },
  methods: {
    createverifycode() {
      axios
        .get("/sys/verifyCode/create?time=" + new Date(), {
          params: this.employee,
        })
        .then((resp) => {
          if (resp.data.code == 200) {
            this.verifycodesrc = resp.data.data.code;
            this.employee.uuid = resp.data.data.uuid;
          }
        });
    },
    login() {
      axios.post("/sys/admlogin", this.employee).then((resp) => {
        if (resp.data.code == 200) {
          //  将响应头中的token存入LocalStorage
          let token = resp.headers["x-auth-token"];
          window.localStorage.setItem("token", token);
          let number = resp.headers["number"];
          window.localStorage.setItem("number", number);
          this.$message(resp.data.msg);
          this.$router.push("/main");
        } else if (resp.data.code == 401) {
          this.$message.error(response.data.msg);
          this.$router.push("/admlogin");
          this.createverifycode();
        } else {
          this.createverifycode();
        }
      });
    },
  },
};
</script>
  
  <style>
.loginForm {
  width: 300px;
  margin-top: 100px;
  margin: auto;
  padding-top: 150px;
}
</style>